<html>
<head>
    <title>Date Wrapper</title>
    <style>
        fieldset { width:80%; background-color:#888; border:1px solid #fff; margin-bottom:10px; }
        fieldset div, fieldset input { width:100%; }
        legend { color:#fff; background-color:#888; border:1px solid #fff; border-bottom:none; }
        legend, input { -webkit-box-shadow: 0 -3px 6px #000; }
        body, input { font-size:15pt; background-color:#111; }
        input { background-color:#fff; color:#000; }
    </style>
    <script src="aetas.js"></script>
    <script>
        var input, output, pid;
        
        function load() {
            input = document.getElementById("input");
            input.focus();
            
            output = document.getElementById("output");
            
            input.onkeyup = parse;
        }
        
        function parse() {
            clearTimeout(pid);
            
            output.innerHTML = "Processing";
            
            pid = setTimeout(
                function() {
            
                    var result = aetas.parse(input.value);
                    
                    output.innerHTML = result.toString();
                },
                500
            );
        }

    </script>
</head>
<body onload="load();">
    <fieldset>
        <legend>Input</legend>
        <input id="input" type="text" />
    </fieldset>
    <fieldset>
        <legend>Output</legend>
        <div id="output"></div>
    </fieldset>
</body>
</html>
